<template>
  <div>
    <Nav></Nav>
    <div class="container-fluid" style="margin-top: 100px">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
          <table
            class="text-center table table-bordered"
            align="center"
            width="100%"
          >
            <tr class="bg-light text-black-50">
              <th colspan="2"><h3>商品入库</h3></th>
            </tr>
            <tr>
              <td style="width: 150px">名称：</td>
              <td>
                <input
                  class="form-control"
                  placeholder="商品名称"
                  type="text"
                  name="productName"
                  v-model="product.productName"
                />
              </td>
            </tr>
            <tr>
              <td>单价：</td>
              <td>
                <input
                  class="form-control"
                  placeholder="单价"
                  type="number"
                  name="price"
                  v-model="product.price"
                />
              </td>
            </tr>
            <tr>
              <td>库存：</td>
              <td>
                <input
                  class="form-control"
                  placeholder="库存"
                  type="number"
                  name="stock"
                  v-model="product.stock"
                />
              </td>
            </tr>
            <tr>
              <td>图片：</td>
              <td>
                <img
                  :src="product.imageUrl"
                  class="img-fluid img-thumbnail"
                  alt="请选择图片"
                  style="width: 100px; height: 40%; object-fit: cover"
                />
              </td>
            </tr>
            <tr>
              <td>商品图片：</td>
              <td>
                <el-upload
                  class="upload-demo"
                  action="/api/upload"
                  multiple
                  :on-preview="handlePreview"
                  :on-success="handleSuccess"
                >
                  <el-button type="primary">选择图片</el-button>
                </el-upload>
              </td>
            </tr>
            <tr>
              <td>详情：</td>
              <td>
                <textarea
                  class="form-control"
                  rows="5"
                  placeholder="商品描述..."
                  name="description"
                  v-model="product.description"
                ></textarea>
              </td>
            </tr>
            <tr>
              <td>
                <input
                  class="btn btn-outline-warning"
                  style="width: 100px"
                  @click="back()"
                  value="取消"
                />
              </td>
              <td>
                <input
                  class="btn btn-success"
                  style="width: 200px"
                  type="submit"
                  value="添加"
                  @click="Add()"
                />
              </td>
              <td>
                <input
                  class="btn btn-outline-warning"
                  type="reset"
                  value="清空"
                />
              </td>
            </tr>
          </table>
        </div>
        <div class="col-md-3"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="Add">
import Nav from "../Nav.vue";
import "../../assets/css/bootstrap.min.css";
import "../../assets/css/font-awesome.css";
import { ref, reactive } from "vue";
import { addProduct } from "../../api/product";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const product = reactive({
  productName: null,
  price: 0,
  stock: 0,
  imageUrl: "",
  description: "",
});
const handlePreview: UploadProps["onPreview"] = (uploadFile) => {};
const handleSuccess: UploadProps["onSuccess"] = (value) => {
  if (value.code === 1) {
    console.log("##########################", value);
    ElMessage.success("图片上传成功");
    product.imageUrl = value.data;
  }
  if (value.code === 0) {
    ElMessage.error(value.msg);
  }
};

const Add = async () => {
  const res = await addProduct(product);
  if (res.data.code === 1) {
    ElMessage.success("商品添加成功");
    router.push("/productList");
  }
  if (res.data.code === 0) {
    ElMessage.error("商品添加失败");
  }
};
const back = () => {
  window.location.href = "/productList";
}
</script>

<style scoped></style>
